<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<!-- <script type="text/javascript" src="js/jquery.js"></script> -->
		<script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>
		<!-- <script type="text/javascript" src="js/echarts.min.js"></script> -->
		<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
		<script src="https://www.w3school.com.cn/js/myScript1.js"></script>
	</head>

	<body>
		<div class="mian">
			<div class="echarts">
				<div class="btnclum">
					<button type="button" id="day" class="nh">1天能耗</button>
					<button type="button" id="month" class="nha">30天能耗</button>
				</div>
				<h2 class="titletext" style="text-align: center;width: 100%;color: #ffd285;">被动房1天能耗对比 (120平米三室一厅)</h2>
				<div style="width: 100%; display: flex;">
					<div id="echarts1" style="width: 50%;height:600px;"></div>
					<div id="rander1" style="width: 50%;height: 600px;"></div>
				</div>
			</div>

			<table class="table" border>
				<thead>
					<tr style="color: #fff;" height="50px">
						<td></td>
						<td>中央空调</td>
						<td>风管机</td>
						<td>普通空调</td>
						<td style="background: rgba(11, 163, 96,0.5);">被动房</td>
					</tr>
				</thead>
				<tbody>
					<tr style="color: #fff;" height="50px">
						<td>能耗</td>
						<td class="nhnuma">70KW - 90KW</td>
						<td class="nhnumb">65KW - 75KW</td>
						<td class="nhnumc">60KW - 70KW</td>
						<td style="background: rgba(11, 163, 96,0.5); " class="nhnumd">5KW - 8KW</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>健康</td>
						<td style="color: #fff; font-size:18px">适中</td>
						<td style=" color: #fff; font-size:18px">适中</td>
						<td style="color: #fff; font-size:18px">一般</td>
						<td style=" background: rgba(11, 163, 96,0.5); font-size:18px">最佳</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>舒适度</td>
						<td style="color: #fff;  font-size:18px">适中</td>
						<td style="color: #fff;  font-size:18px">适中</td>
						<td style="color: #fff;  font-size:18px">一般</td>
						<td style="background: rgba(11, 163, 96,0.5); font-size:18px">最佳</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>恒温</td>
						<td style="color: #0ba360;  font-size:22px">√</td>
						<td style="color: #0ba360;  font-size:22px">√</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="background: rgba(11, 163, 96,0.5); font-size:22px">√</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>恒湿</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="background: rgba(11, 163, 96,0.5); font-size:22px">√</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>恒氧</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="background: rgba(11, 163, 96,0.5); font-size:22px">√</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>恒洁</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="background: rgba(11, 163, 96,0.5); font-size:22px">√</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>恒静</td>
						<td style="color: red; font-size:22px">×</td>
						<td style="color: red; font-size:22px">×</td>
						<td style="color: red; font-size:22px">×</td>
						<td style="background: rgba(11, 163, 96,0.5); font-size:22px">√</td>
					</tr>
				</tbody>
			</table>



			<!-- 1000tian -->
			<div class="echarts">
				<div class="btnclum">
					<button type="button" id="daya" class="nh">1天能耗</button>
					<button type="button" id="montha" class="nha">30天能耗</button>
				</div>
				<!-- <div id="echarts2" style="width: 100%;height:600px;"></div> -->
				<h2 class="titletexta" style="text-align: center;width: 100%;color: #ffd285;">被动房1天能耗对比 (120平米三室一厅)</h2>
				<div style="width: 100%; display: flex;">
					<div id="echarts2" style="width: 50%;height:600px;"></div>
					<div id="rander2" style="width: 50%;height: 600px;"></div>
				</div>
			</div>

			<table class="table" border>
				<thead>
					<tr style="color: #fff;" height="50px">
						<td></td>
						<td>中央空调</td>
						<td>风管机</td>
						<td>普通空调</td>
						<td style="background: rgba(11, 163, 96,0.5);">被动房</td>
					</tr>
				</thead>
				<tbody>
					<tr style="color: #fff;" height="50px">
						<td>能耗</td>
						<td class="nhnumaa">70KW - 90KW</td>
						<td class="nhnumba">65KW - 75KW</td>
						<td class="nhnumca">60KW - 70KW</td>
						<td style="background: rgba(11, 163, 96,0.5); " class="nhnumda">5KW - 8KW</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>健康</td>
						<td style="color: #fff; font-size:18px">适中</td>
						<td style=" color: #fff; font-size:18px">适中</td>
						<td style="color: #fff; font-size:18px">一般</td>
						<td style=" background: rgba(11, 163, 96,0.5); font-size:18px">最佳</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>舒适度</td>
						<td style="color: #fff;  font-size:18px">适中</td>
						<td style="color: #fff;  font-size:18px">适中</td>
						<td style="color: #fff;  font-size:18px">一般</td>
						<td style="background: rgba(11, 163, 96,0.5); font-size:18px">最佳</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>恒温</td>
						<td style="color: #0ba360;  font-size:22px">√</td>
						<td style="color: #0ba360;  font-size:22px">√</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="background: rgba(11, 163, 96,0.5); font-size:22px">√</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>恒湿</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="background: rgba(11, 163, 96,0.5); font-size:22px">√</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>恒氧</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="background: rgba(11, 163, 96,0.5); font-size:22px">√</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>恒洁</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="color: red;  font-size:22px">×</td>
						<td style="background: rgba(11, 163, 96,0.5); font-size:22px">√</td>
					</tr>
					<tr style="color: #fff;" height="50px">
						<td>恒静</td>
						<td style="color: red; font-size:22px">×</td>
						<td style="color: red; font-size:22px">×</td>
						<td style="color: red; font-size:22px">×</td>
						<td style="background: rgba(11, 163, 96,0.5); font-size:22px">√</td>
					</tr>
				</tbody>
			</table>
			<div class="echarts" style="padding-top: 20px;">
				<div class="btncluma">
					<button type="button" id="yibai" class="nh">120平</button>
					<button type="button" id="yiqian" class="nha">1000平</button>
				</div>
				<div id="echarts3" style="width: 100%;height:600px;"></div>
			</div>
		</div>
	</body>
	<script>
		$(function() {
			echarts_1(1)
			echarts_2(1)
			echarts_3(1)
			rander_1()
			rander_2()
			$("#day").click(function() {
				echarts_1(1)
				$('#day').css('background', '#00c6fb')
				$('#month').css('background', '#ffd285')
			});
			$("#month").click(function() {
				echarts_1(30)
				$('#day').css('background', '#ffd285')
				$('#month').css('background', '#00c6fb')
			});
			$("#daya").click(function() {
				echarts_2(1)
				$('#daya').css('background', '#00c6fb')
				$('#montha').css('background', '#ffd285')
			});
			$("#montha").click(function() {
				echarts_2(30)
				$('#daya').css('background', '#ffd285')
				$('#montha').css('background', '#00c6fb')
			});
			$("#yibai").click(function() {
				echarts_3(1)
				$('#yibai').css('background', '#00c6fb')
				$('#yiqian').css('background', '#ffd285')
			});
			$("#yiqian").click(function() {
				echarts_3(30)
				$('#yibai').css('background', '#ffd285')
				$('#yiqian').css('background', '#00c6fb')
			});

			function echarts_1(num) {
				console.log(num);
				var myChart = echarts.init(document.getElementById('echarts1'));
				var placeHolderStyle = {
					normal: {
						label: {
							show: false,
							position: "center",
						},
						labelLine: {
							show: false,
						},
						color: "#dedede",
						borderColor: "#dedede",
						borderWidth: 0,
					},
					emphasis: {
						color: "#dedede",
						borderColor: "#dedede",
						borderWidth: 0,
					},
				};
				var zlData
				var zrData
				var titletext
				var jkData
				var suData
				if (num == 1) {
					zlData = [70, 65, 60, 5]
					zrData = [90, 75, 70, 8]
					// titletext = '被动房1天能耗对比 (120平米三室一厅)'
					jkData = [10, 15, 10, 100]
					suData = [15, 20, 10, 100]
					$('.titletext').html('被动房1天能耗对比 (120平米三室一厅)')
					$('.nhnuma').html('70KW - 90KW')
					$('.nhnumb').html('65KW - 75KW')
					$('.nhnumc').html('60KW - 70KW')
					$('.nhnumd').html('5KW - 8KW')
				} else if (30) {
					zlData = [2100, 1950, 1800, 150]
					zrData = [2700, 2250, 2100, 240]
					jkData = [300, 450, 300, 3000]
					suData = [450, 600, 300, 3000]
					$('.titletext').html('被动房30天能耗对比 (120平米三室一厅)')
					$('.nhnuma').html('2100KW - 2700KW')
					$('.nhnumb').html('1950KW - 2250KW')
					$('.nhnumc').html('1800KW - 2100KW')
					$('.nhnumd').html('150KW - 240KW')
				}
				option = {
					// backgroundColor: "#404A59",
					color: ["#00c6fb", "#f43b47", '#0ba360', '#fbc2eb', ],
					tooltip: {
						trigger: 'item',

					},
					legend: {
						x: "25%",
						bottom: "0%",
						textStyle: {
							color: "#ffd285",
						},
					},
					grid: {
						left: "5%",
						right: "0%",
						top: "10%",
						bottom: "8%",
						containLabel: true,
					},
					toolbox: {
						show: false,
						feature: {
							saveAsImage: {},
						},
					},
					xAxis: {
						type: "category",
						axisLine: {
							lineStyle: {
								color: "#ffd285",
							},
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							textStyle: {
								color: "#ffd285",
							},
						},
						boundaryGap: true, //false时X轴从0开始
						data: ["中央空调(6P)", "风管机(6P)", "普通空调(7.5P)", "被动房"],
					},
					yAxis: {
						axisLine: {
							lineStyle: {
								color: "#ffd285",
							},
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: "#ffd285",
							},
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							textStyle: {
								color: "#ffd285",
								fontSize: 14
							},
						},
						type: "value",
					},
					series: [{
							name: "制冷能耗(千瓦)",
							smooth: true,
							type: "bar",
							symbolSize: 8,
							label: {
								show: true,
								position: "top",
								textStyle: {
									color: "#ffd285",
								},
								formatter: '{c}KW' //百分比显示
							},
							//symbol: 'circle',
							data: zlData,
						},
						{
							name: "制热能耗(千瓦)",
							smooth: true,
							type: "bar",
							symbolSize: 8,
							//symbol: 'circle',
							data: zrData,
							label: {
								show: true,
								position: "top",
								textStyle: {
									color: "#ffd285",
								},
								formatter: '{c}KW' //百分比显示
							},
						},
						{
							name: "健康",
							smooth: true,
							type: "bar",
							symbolSize: 8,
							//symbol: 'circle',
							data: jkData,
							label: {
								show: true,
								position: "top",
								textStyle: {
									color: "#ffd285",
								},
								formatter: function(params) {

									if (num == 1) {
										let numa = ((jkData[params.dataIndex] * 100) / 100)
										return `${numa}%`
									} else {
										let numa = ((jkData[params.dataIndex] * 100) / 3000).toFixed(1)
										return `${numa}%`
									}
								},
							},
						},
						{
							name: "舒适度",
							smooth: true,
							type: "bar",
							symbolSize: 8,
							//symbol: 'circle',
							data: suData,
							label: {
								show: true,
								position: "top",
								textStyle: {
									color: "#ffd285",
								},
								formatter: function(params) {
									console.log(suData[params.dataIndex]);
									if (num == 1) {
										let numa = ((suData[params.dataIndex] * 100) / 100)
										return `${numa}%`
									} else {
										let numa = ((suData[params.dataIndex] * 100) / 3000).toFixed(1)
										return `${numa}%`
									}
								},
							},
						},
					],
				};
				myChart.setOption(option);
				window.addEventListener("resize", function() {
					myChart.resize();
				});
			}

			function echarts_2(num) {
				var myCharta = echarts.init(document.getElementById('echarts2'));
				var placeHolderStyle = {
					normal: {
						label: {
							show: false,
							position: "center",
						},
						labelLine: {
							show: false,
						},
						color: "#dedede",
						borderColor: "#dedede",
						borderWidth: 0,
					},
					emphasis: {
						color: "#dedede",
						borderColor: "#dedede",
						borderWidth: 0,
					},
				};
				var zlDataa
				var zrDataa
				var titletexta
				var jkDataa
				var suDataa
				if (num == 1) {
					zlDataa = [580, 540, 500, 40]
					zrDataa = [750, 625, 580, 60]
					jkDataa = [80, 120, 80, 800]
					suDataa = [120, 160, 80, 800]
					$('.titletexta').html('被动房1天能耗对比 (1000平米)')
					$('.nhnumaa').html('580KW - 750KW')
					$('.nhnumba').html('540KW - 625KW')
					$('.nhnumca').html('500KW - 580KW')
					$('.nhnumda').html('40KW - 60KW')
				} else if (30) {
					zlDataa = [17400, 16200, 15000, 1200]
					zrDataa = [22500, 18750, 17400, 1800]
					jkDataa = [2500, 3750, 2500, 25000]
					suDataa = [3750, 5000, 2500, 25000]
					$('.titletexta').html('被动房30天能耗对比 (1000平米)')
					$('.nhnumaa').html('17400KW - 22500KW')
					$('.nhnumba').html('16200KW - 18750KW')
					$('.nhnumca').html('15000KW - 17400KW')
					$('.nhnumda').html('1200KW - 1800KW')
				}
				var option = {
					color: ["#00c6fb", "#f43b47", '#0ba360', '#fbc2eb', ],
					tooltip: {
						trigger: 'item',

					},
					legend: {
						x: "25%",
						bottom: "0%",
						textStyle: {
							color: "#ffd285",
						},
					},
					grid: {
						left: "5%",
						right: "0%",
						top: "10%",
						bottom: "8%",
						containLabel: true,
					},
					toolbox: {
						show: false,
						feature: {
							saveAsImage: {},
						},
					},
					xAxis: {
						type: "category",
						axisLine: {
							lineStyle: {
								color: "#ffd285",
							},
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							textStyle: {
								color: "#ffd285",

							},
						},
						boundaryGap: true, //false时X轴从0开始
						data: ["中央空调(6P)", "风管机(6P)", "普通空调(7.5P)", "被动房"],
					},
					yAxis: {
						axisLine: {
							lineStyle: {
								color: "#ffd285",
							},
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: "#ffd285",
							},
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							textStyle: {
								color: "#ffd285",
								fontSize: 14
							},
						},
						type: "value",
					},
					series: [{
							name: "制冷能耗(千瓦)",
							smooth: true,
							type: "bar",
							symbolSize: 8,
							label: {
								show: true,
								position: "top",
								textStyle: {
									color: "#ffd285",
								},
								formatter: '{c}KW' //百分比显示
							},
							//symbol: 'circle',
							data: zlDataa,
						},
						{
							name: "制热能耗(千瓦)",
							smooth: true,
							type: "bar",
							symbolSize: 8,
							//symbol: 'circle',
							data: zrDataa,
							label: {
								show: true,
								position: "top",
								textStyle: {
									color: "#ffd285",
								},
								formatter: '{c}KW' //百分比显示
							},
						},
						{
							name: "健康",
							smooth: true,
							type: "bar",
							symbolSize: 8,
							data: jkDataa,
							label: {
								show: true,
								position: "top",
								textStyle: {
									color: "#ffd285",
								},
								formatter: function(params) {

									if (num == 1) {
										let numa = ((jkDataa[params.dataIndex] * 100) / 800)
										return `${numa}%`
									} else {
										let numa = ((jkDataa[params.dataIndex] * 100) / 25000).toFixed(1)
										return `${numa}%`
									}
								},
							},
						},
						{
							name: "舒适度",
							smooth: true,
							type: "bar",
							symbolSize: 8,
							data: suDataa,
							label: {
								show: true,
								position: "top",
								textStyle: {
									color: "#ffd285",
								},
								formatter: function(params) {
									if (num == 1) {
										let numa = ((suDataa[params.dataIndex] * 100) / 800)
										return `${numa}%`
									} else {
										let numa = ((suDataa[params.dataIndex] * 100) / 25000).toFixed(1)
										return `${numa}%`
									}
								},
							},
						},
					],
				};
				myCharta.setOption(option);
				window.addEventListener("resize", function() {
					myChart.resize();
				});
			}

			function echarts_3(num) {
				var myChartb = echarts.init(document.getElementById('echarts3'));
				var ybdata
				var yqdata
				var zldata
				var zrdata
				var textdata
				var mydata
				var mydataa
				if (num == 1) {
					ybdata = [63, 58.5, 54, 4.5]
					yqdata = [1890, 1755, 1620, 135]
					mydata = [39.2, 36.4, 33.6, 2.8]
					mydataa = [1176, 1092, 1008, 84]
					textdata = '被动房与传统设备电费对比(120平)'
				} else {
					ybdata = [522, 486, 450, 36]
					yqdata = [15660, 14580, 13500, 1080]
					mydata = [324.8, 302.4, 280, 22.4]
					mydataa = [9744, 9072, 8400, 672]
					textdata = '被动房与传统设备电费对比(1000平)'
				}
				option = {
					// backgroundColor: "#080b30",
					title: {
						text: textdata,
						textStyle: {
							align: "center",
							color: "#ffd285",
							fontSize: 24,
						},
						top: "0%",
						left: "center",
					},
					legend: {
						textStyle: {
							color: "#ffd285",
							// fontSize: 16
						},
						top: "5%",
						x: "60%"
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							lineStyle: {
								color: {
									type: "linear",
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0,
											color: "rgba(0, 255, 233,0)",
										},
										{
											offset: 0.5,
											color: "rgba(255, 255, 255,1)",
										},
										{
											offset: 1,
											color: "rgba(0, 255, 233,0)",
										},
									],
									global: false,
								},
							},
						},
					},
					grid: {
						top: "15%",
						left: "8%",
						right: "8%",
						bottom: "15%",
						// containLabel: true
					},
					xAxis: [{
						type: "category",
						axisLine: {
							lineStyle: {
								color: "rgba(255,255,255,0.5)",
							},
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							textStyle: {
								color: "#ffd285",
							},
						},
						boundaryGap: false,
						data: ["中央空调(6P)", "风管机(6P)", "普通空调(7.5P)", "被动房"],
					}, ],

					yAxis: [{
						type: "value",
						min: 0,
						// max: 140,
						splitNumber: 4,
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(255,255,255,0.5)",
							},
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: "#fff",
							},
						},
						axisLabel: {
							show: true,
							margin: 20,
							textStyle: {
								color: "#ffd285",
							},
						},
						axisTick: {
							show: false,
						},
					}, ],
					series: [{
							name: "1天电费(商用)",
							type: "line",
							// smooth: true, //是否平滑
							showAllSymbol: true,
							// symbol: 'image://./static/images/guang-circle.png',
							symbol: "circle",
							symbolSize: 20,
							lineStyle: {
								normal: {
									color: "#00c6fb",
									shadowColor: "rgba(0, 0, 0, .3)",
									shadowBlur: 0,
									shadowOffsetY: 5,
									shadowOffsetX: 5,
								},
							},
							label: {
								show: true,
								position: "left",
								textStyle: {
									color: "#00c6fb",
								},
								formatter: '{c}¥'
							},
							itemStyle: {
								color: "#00c6fb",
								borderColor: "#fff",
								borderWidth: 2,
								shadowColor: "rgba(0, 0, 0, .3)",
								shadowBlur: 0,
								// shadowOffsetY: 2,
								// shadowOffsetX: 2,
							},
							tooltip: {
								show: false,
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
												offset: 0,
												color: "rgba(0, 198, 251,0.3)",
											},
											{
												offset: 1,
												color: "rgba(0, 198, 251,0.5)",
											},
										],
										false
									),
									shadowColor: "rgba(0, 198, 251, 0.9)",
									shadowBlur: 20,
								},
							},
							data: ybdata,
						},
						{
							name: "30天电费(商用)",
							type: "line",
							// smooth: true, //是否平滑
							showAllSymbol: true,
							// symbol: 'image://./static/images/guang-circle.png',
							symbol: "circle",
							symbolSize: 20,
							lineStyle: {
								normal: {
									color: "#f43b47",
									shadowColor: "rgba(0, 0, 0, .3)",
									shadowBlur: 0,
									shadowOffsetY: 5,
									shadowOffsetX: 5,
								},
							},
							label: {
								show: true,
								position: "top",
								textStyle: {
									color: "#f43b47",
								},
								formatter: '{c}¥'
							},

							itemStyle: {
								color: "#f43b47",
								borderColor: "#fff",
								borderWidth: 2,
								shadowColor: "rgba(0, 0, 0, .3)",
								shadowBlur: 0,
								// shadowOffsetY: 2,
								// shadowOffsetX: 2,
							},
							tooltip: {
								show: false,
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
												offset: 0,
												color: "rgba(244, 59, 71,0.3)",
											},
											{
												offset: 1,
												color: "rgba(244, 59, 71,0.5)",
											},
										],
										false
									),
									shadowColor: "rgba(244, 59, 71, 0.9)",
									shadowBlur: 20,
								},
							},
							data: yqdata,
						},
						{
							name: "1天电费(民用)",
							type: "line",
							// smooth: true, //是否平滑
							showAllSymbol: true,
							// symbol: 'image://./static/images/guang-circle.png',
							symbol: "circle",
							symbolSize: 20,
							lineStyle: {
								normal: {
									color: "#667eea",
									shadowColor: "rgba(0, 0, 0, .3)",
									shadowBlur: 0,
									shadowOffsetY: 5,
									shadowOffsetX: 5,
								},
							},
							label: {
								show: true,
								position: "right",
								textStyle: {
									color: "#fff",
								},
								formatter: '{c}¥'
							},
							itemStyle: {
								color: "#667eea",
								borderColor: "#fff",
								borderWidth: 2,
								shadowColor: "rgba(0, 0, 0, .3)",
								shadowBlur: 0,
								// shadowOffsetY: ,
								// shadowOffsetX: 2,
							},
							tooltip: {
								show: false,
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
												offset: 0,
												color: "rgba(111, 96, 191,0.3)",
											},
											{
												offset: 1,
												color: "rgba(111, 96, 191,0.5)",
											},
										],
										false
									),
									shadowColor: "rgba(111, 96, 191, 0.9)",
									shadowBlur: 20,
								},
							},
							data: mydata,
						},
						{
							name: "30天电费(民用)",
							type: "line",
							// smooth: true, //是否平滑
							showAllSymbol: true,
							// symbol: 'image://./static/images/guang-circle.png',
							symbol: "circle",
							symbolSize: 20,
							lineStyle: {
								normal: {
									color: "#b721ff",
									shadowColor: "rgba(0, 0, 0, .3)",
									shadowBlur: 0,
									shadowOffsetY: 5,
									shadowOffsetX: 5,
								},
							},
							label: {
								show: true,
								position: "right",
								textStyle: {
									color: "#b721ff",
									
								},
								formatter: '{c}¥'
							},

							itemStyle: {
								color: "#b721ff",
								borderColor: "#fff",
								borderWidth: 2,
								shadowColor: "rgba(0, 0, 0, .3)",
								shadowBlur: 0,
								// shadowOffsetY: 2,
								// shadowOffsetX: 2,
							},
							tooltip: {
								show: false,
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
												offset: 0,
												color: "rgba(161, 59, 255,0.3)",
											},
											{
												offset: 1,
												color: "rgba(161, 59, 255,0.5)",
											},
										],
										false
									),
									shadowColor: "rgba(161, 59, 255, 0.9)",
									shadowBlur: 20,
								},
							},
							data: mydataa,
						},
					],
				};
				myChartb.setOption(option);
				window.addEventListener("resize", function() {
					myChart.resize();
				});
			}

			function rander_1() {
				var mychartss = echarts.init(document.getElementById('rander1'))
				option = {
						color: ["#8ec5fc", "#f9f586", "#fa709a", "#43e97b"],
						tooltip: {},
						legend: {
							x: "25%",
							bottom: "0%",
							textStyle: {
								color: "#ffd285",
							},
						},
						radar: {
							axisLine: {
								lineStyle: {
									color: "#ffd285",
								},
							},

							indicator: [{
									name: "恒温",
									max: 100,
									z: 5,
								},
								{
									name: "恒湿",
									max: 100,
									z: 4,
								},
								{
									name: "恒氧",
									max: 100,
									z: 3,
								},
								{
									name: "恒洁",
									max: 100,
									z: 2,
								},
								{
									name: "恒静",
									max: 100,
									z: 1,
								},
							],
							center: ["50%", "50%"],
							radius: '50%',
						},
						series: [{
							type: "radar",
							symbol: "none",
							areaStyle: {
								normal: {
									opacity: 0.3,
								},

							},

							itemStyle: {
								normal: {
									lineStyle: {
										width: 3,
									},
								},
								emphasis: {
									areaStyle: {
										opacity: 0.5,
									},

								},
							},

							center: ["88%", "85%"],
							//radius: ['15%', '20%'],
							//name: '雷达',
							tooltip: {},
							data: [{
									value: [70, 15, 10, 0, 12],
									name: "中央空调",
								},
								{
									value: [90, 10, 6, 0, 0],
									name: "风管机",
								},
								{
									value: [50, 5, 0, 0, 0],
									name: "普通空调",
								},
								{
									value: [100, 100, 100, 100, 100],
									name: "被动房",
								},
							],
						}, ]
					},
					mychartss.setOption(option);
				window.addEventListener("resize", function() {
					myChart.resize();
				});
			}

			function rander_2() {
				var mychartsss = echarts.init(document.getElementById('rander2'))
				option = {
						color: ["#8ec5fc", "#f9f586", "#fa709a", "#43e97b"],
						tooltip: {},
						legend: {
							x: "25%",
							bottom: "0%",
							textStyle: {
								color: "#ffd285",
							},
						},
						radar: {
							axisLine: {
								lineStyle: {
									color: "#ffd285",
								},
							},

							indicator: [{
									name: "恒温",
									max: 100,
									z: 5,
								},
								{
									name: "恒湿",
									max: 100,
									z: 4,
								},
								{
									name: "恒氧",
									max: 100,
									z: 3,
								},
								{
									name: "恒洁",
									max: 100,
									z: 2,
								},
								{
									name: "恒静",
									max: 100,
									z: 1,
								},
							],
							center: ["50%", "50%"],
							radius: '50%',
						},
						series: [{
							type: "radar",
							symbol: "none",
							areaStyle: {
								normal: {
									opacity: 0.3,
								},

							},

							itemStyle: {
								normal: {
									lineStyle: {
										width: 3,
									},
								},
								emphasis: {
									areaStyle: {
										opacity: 0.5,
									},

								},
							},

							center: ["88%", "85%"],
							//radius: ['15%', '20%'],
							//name: '雷达',
							tooltip: {},
							data: [{
									value: [70, 15, 10, 0, 12],
									name: "中央空调",
								},
								{
									value: [90, 10, 6, 0, 0],
									name: "风管机",
								},
								{
									value: [50, 5, 0, 0, 0],
									name: "普通空调",
								},
								{
									value: [100, 100, 100, 100, 100],
									name: "被动房",
								},
							],
						}, ]
					},
					mychartsss.setOption(option);
				window.addEventListener("resize", function() {
					myChart.resize();
				});
			}
		})
	</script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background-image: url('./img/53bg.png');
			background-size: cover;
		}

		.mian {
			width: 100%;
		}

		.echarts {
			padding-top: 45px;
			/* padding-left: 25px; */
			position: relative;
		}

		.table {
			/* border: 1px solid rgba(218, 220, 224, 1); */
			width: 90%;
			margin: 30px auto;
			text-align: center;
			border-color: rgba(218, 220, 224, 0.5);
			font-size: 16px;
			font-weight: 900;
			background: rgba(0, 0, 0, 0.5);
		}

		.table thead tr td {
			font-size: 18px;
		}

		.nh {
			width: 80px;
			height: 30px;
			background-color: #00c6fb;
			border: 1px solid rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			display: inline-block;
			margin-right: 10px;
		}

		.nha {
			width: 80px;
			height: 30px;
			background-color: #ffd285;
			border: 1px solid rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			display: inline-block;
		}

		.btnclum {
			position: absolute;
			top: 100px;
			left: 50px;
			z-index: 99999;
		}

		.btncluma {
			position: absolute;
			top: 60px;
			left: 45px;
			z-index: 99999;
		}
	</style>

</html>